<template>
  <div class="wrapper">
    <swiper :options="swiperOption">
      <!-- slides -->
      <swiper-slide v-for="item of list">
        <img class="swiperImg" :src="item.imgUrl" :key="item.id">
      </swiper-slide>
      <!-- Optional controls -->
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
  export default {
    name: "HomeSwiper",
    props: {
      list: Array
    },
    data() {
      return {
        swiperOption: {
          loop: true
        }
      }
    }
  }
</script>
<style lang="stylus" scoped>
  /*盒子模型：
  可视区域（在页面渲染的实际图形大小）= content(就是height、width)+padding+border+margin
  background: 作用于 content+padding
  overflow: 作用于 content+padding
  当content设置好宽高:
  1、如果content里的元素大小超过content,那么他将会覆盖content和padding,
  2、如果超过content+padding，这时overflow属性就控制当元素大小超过content+padding时的动作：
    visible：默认值，如果元素大小太大，将会覆盖整个可视区域，超出可视区域部分也会显示，相当于元素有多大就显示多大
    hidden: 超出content+padding部分会隐藏，只显示content+padding的大小
    scroll: （注意这时元素内容不会覆盖padding及以外的内容）会出现滚动条来操作超出部分，只显示content+padding的大小（滚动条在content+padding里）
    auto: 上面的scroll无论元素大小是否超过content+padding都会有滚动条，而auto只有超出才会有
    inherit:	规定应该从父元素继承 overflow 属性的值。
  */
  .wrapper
    width 100%
    height 0
    overflow hidden
    padding-bottom 30%
    background-color #cacaca
    .swiperImg
      width 100%
</style>
